<template>
  <v-card flat class="pl-4">
    <div class="d-flex align-center title-container">
      <h3 class="pl-3 pr-3">Entity</h3>
      <v-btn
        @click="action"
        depressed
        min-width="unset"
        height="40"
        width="40"
        color="#D9D9D9"
        class="rounded-circle elevation-4"
      >
        <v-icon color="#626C84" v-if="prospect"> mdi-arrow-left-thick </v-icon>
        <v-icon color="#626C84" v-else>mdi-plus-thick</v-icon>
      </v-btn>
    </div>
    <div class="list rounded-lg" :class="{ 'pa-2': !prospect }">
      <div
        class="d-flex justify-space-between pl-3 pr-3 align-center list-title"
        v-if="prospect"
      >
        <h3>Prospect</h3>
        <v-icon @click="addProspect" color="#BABABC" size="18">
          mdi-plus-thick
        </v-icon>
      </div>
      <v-list dense class="pa-0 rounded-lg px-3" v-if="prospect">
        <v-list-item-group v-model="selectedProspectSynced">
          <v-list-item
            v-for="prospect in prospectList"
            :key="prospect.id"
            :value="prospect"
            class="pa-2 list-item"
            active-class="active"
          >
            <v-list-item-content>
              <v-list-item-title class="list-item-content">
                {{ prospect.prospectNumber }}
              </v-list-item-title>
              <v-list-item-subtitle class="list-item-content">
                {{ prospect.customerName }}
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
      <v-list dense class="pa-0" v-else>
        <v-list-item-group v-model="selectedEntitySynced" mandatory>
          <v-list-item
            v-for="entity in propEntities"
            :key="entity.id"
            :value="entity"
            class="pa-2 list-item"
            active-class="active"
          >
            <v-list-item-content>
              <v-list-item-subtitle class="list-item-content">
                {{ entity.entityType }}
                {{ entity.companyList.length }}
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </div>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import { IEntity } from "@/components/Customer/index";
@Component({
  props: {
    entities: Array,
  },
})
export default class SliderMenu extends Vue {
  @PropSync("selectedProspect", { type: Object })
  selectedProspectSynced!: IEntity | null;
  @PropSync("selectedEntity", { type: Object })
  selectedEntitySynced!: IEntity | null;
  get prospect() {
    const routeName = this.$route.name;
    if (routeName === "ProspectCustomer") {
      return true;
    } else if (routeName === "ExistingCustomer") {
      return false;
    }
    return false;
  }
  get propEntities() {
    return this.$props.entities;
  }
  get prospectList() {
    return this.$store.state.ProspectStore.prospectList;
  }
  addProspect() {
    this.$store.commit("ProspectStore/setStep", 1);
    this.selectedProspectSynced = null;
  }
  action() {
    if (this.prospect) {
      this.$emit("routerBack");
    } else {
      this.$bus.$emit("addCompany");
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Customer/SliderMenu.scss";
</style>
